// 我的 报价单
<template>
  <div class="myQuotation">
    <ul class="title">
      <li v-for="(item,key) in title" :key="key" class="active" @click="changesjump($event,key)">
        {{item.name}}
        <i v-show="item.num">({{item.num}})</i>
      </li>
    </ul>

    <el-form
      :inline="true"
      :model="formInline"
      class="demo-form-inline"
      size="mini"
      style="margin-top:28px;"
    >
      <el-form-item label="关键词：" style="margin-left:20px;">
        <el-input v-model="formInline.quotationNo" placeholder="报价单号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          type="warning"
          @click="onSubmit"
          icon="el-icon-search"
          :disabled="disabled"
          :loading="loading"
        >查找</el-button>
      </el-form-item>
    </el-form>

    <p class="NumberOfBars">已保存了2条报价单</p>

    <div v-for="(table,index) in getTable" :key="index">
      <el-table :data="table.goods" style="width: 100%" :span-method="objectSpanMethod">
        <el-table-column label="产品描述" width="400">
          <template slot-scope="scope">
            <div style="display:flex;flex-direction:row;align-items:center">
              <img
                :src="scope.row.goods_logo "
                alt="加载失败"
                style="width:74px;height:74px;padding-right:15px"
              >
              <p>
                <span style="font-size:14px;">{{ scope.row.goods_title }}</span>
                <br>
                <span
                  style="font-size:12px; color:#999"
                >商品型号:{{scope.row.id}}-{{scope.row.goods_id}}</span>
              </p>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="单价" width="100" prop="price">
          <template slot-scope="scope">
            <div>
              <p style="line-height:100px;">{{scope.row.selling_price}}</p>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="数量" prop="num" width="70">
          <template slot-scope="scope">
            <div>
              <p style="line-height:100px;">{{scope.row.num}}</p>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="总计">
          <template slot-scope="scope">
            <div style="color:#5f5f5f;font-size:12px;">
              <span style="color:#ff0000;font-weight:900">{{ table.total_price }}元</span>
              <br>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="报价单状态">
          <template slot-scope="scope">
            <div style="color:#5f5f5f;font-size:12px;">
              <p v-if="table.quote_status">已转订单</p>
              <p v-else>未转订单</p>
              <p>有效期：{{ table.validity_period }}</p>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <div style="display:flex;flex-direction: column;align-items: center">
              <a :href="table.exportUrl" target="_blank">
                <el-button size="mini" type="warning" style="margin-bottom:5px;">导出报价单</el-button>
              </a>

              <el-button
                size="mini"
                type="warning"
                plain
                style="margin-bottom:5px;"
                @click="jumpOrder(index)"
              >转订单</el-button>

              <a :href="table.previewUrl" target="_blank">
                <p style="cursor: pointer;">报价单预览</p>
              </a>
              <!-- <p style="color:#ff9000;font-size:12px;">在线下单约省20元</p> -->
            </div>
          </template>
        </el-table-column>
      </el-table>
      <p
        style="text-align: right;font-size:12px; padding-right:20px;color:#ff9000; margin-bottom: 20px"
      >报价单号：{{table.quote_no}} 报价时间：{{table.create_at}}</p>
    </div>
    <el-pagination
      background
      layout="prev, pager, next"
      :current-page="page"
      :page-size="10"
      :total="pages"
    ></el-pagination>
  </div>
</template>
<script>
export default {
  name: "myQuotation",
  data() {
    return {
      title: [
        {
          name: "我的报价单",
          id: 0
        }
      ],
      loading: false,
      // disabled:true,
      page: 1,
      pages: null,
      formInline: {
        quotationNo: "",
      },
      getTable: [],
      tableDATA: {
        tableData: [
          {
            describe: [
              {
                imgSrc:
                  "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537355243321&di=7520751852cf57a6c9248e12e9be0a64&imgtype=0&src=http%3A%2F%2Fv1.qzone.cc%2Favatar%2F201505%2F09%2F11%2F06%2F554d799d3c96b172.png%2521200x200.jpg",
                name:
                  "短头内六角圆柱头螺钉 高强度 碳钢 短头内六角圆柱头螺钉 高强度 碳钢",
                nums: "FDDHH5125"
              },
              {
                imgSrc:
                  "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537355243321&di=7520751852cf57a6c9248e12e9be0a64&imgtype=0&src=http%3A%2F%2Fv1.qzone.cc%2Favatar%2F201505%2F09%2F11%2F06%2F554d799d3c96b172.png%2521200x200.jpg",
                name: "短头内六角圆柱头螺钉 高强度 碳钢",
                nums: "FDDHH5125"
              }
            ],
            prices: [
              {
                price: "200"
              },
              {
                price: "300"
              }
            ],
            nums: [
              {
                num: "5"
              },
              {
                num: "103"
              }
            ],
            add: {
              addnum: "500.00",
              freight: "0.00",
              payMeth: "银行转账"
            },

            OrderType: {
              describes: "未转订单",
              termOfValidity: "2018-09-25 13:25:25"
            }
          }
        ],
        tableData2: [
          {
            describe: [
              {
                imgSrc:
                  "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537355243321&di=7520751852cf57a6c9248e12e9be0a64&imgtype=0&src=http%3A%2F%2Fv1.qzone.cc%2Favatar%2F201505%2F09%2F11%2F06%2F554d799d3c96b172.png%2521200x200.jpg",
                name:
                  "短头内六角圆柱头螺钉 高强度 碳钢 短头内六角圆柱头螺钉 高强度 碳钢",
                nums: "FDDHH5125"
              }
            ],
            prices: [
              {
                price: "200"
              }
            ],
            nums: [
              {
                num: "5"
              }
            ],
            add: {
              addnum: "500.00",
              freight: "0.00",
              payMeth: "银行转账"
            },

            OrderType: {
              describes: "未转订单",
              termOfValidity: "2018-09-25 13:25:25"
            }
          }
        ]
      }
    }
  },

  // props:{
  //     myKey : Number
  // },
  computed: {
    disabled() {
      console.log(this.formInline.quotationNo)
      if (this.formInline.quotationNo) {
        return false
      } else {
        return true
      }
    }
  },
  methods: {
    // 合并列
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 3 || columnIndex === 4 || columnIndex === 5) {
        if (rowIndex % 100 === 0) {
          return {
            rowspan: 100,
            colspan: 1
          }
        }
        else {
          return {
            rowspan: 100,
            colspan: 0
          }
        }
      }
    },
    // 获取报价单数据
    async getQqotation() {
      let user_id = this.$store.state.UserInfor.user_id
      let page = this.page
      const res = await this.$http({
        method: 'post',
        url: 'index/api/myQuote',
        data: {
          user_id,
          page
        }
      })
      if (res.data.State.Code == 200) {
        this.pages = res.data.page
        this.getTable = []
        this.getTable = res.data.data
        this.getTable.forEach(element => {
          let param = ''
          let nums = ''
          for (const key in element.goods) {
            if (element.goods.hasOwnProperty(key)) {
              const ele = element.goods[key]
              param += `${ele.request_id},`
              nums += `${ele.num},`
            }
          }
          console.log(param)
          param = param.substr(0, param.length - 1)
          nums = nums.substr(0, nums.length - 1)


          this.$set(element, 'exportUrl', `https://www.fdimall.com/index/api/downloadPdf?user_id=${user_id}&invoice_type=${element.invoice_type}&quote_no=${element.quote_no}&goods_id=${param}&num=${nums} `)

          this.$set(element, 'previewUrl', `https://www.fdimall.com/index/api/previewPdf?user_id=${user_id}&invoice_type=${element.invoice_type}&quote_no=${element.quote_no}&goods_id=${param}&num=${nums} `)
        })
      }
      // this.getTable = list
    },

    // 搜索
    async onSubmit() {
      this.loading = true
      let user_id = this.$store.state.UserInfor.user_id
      let quote_no = this.formInline.quotationNo
      const res = this.$http({
        method: 'post',
        url: 'index/api/inquiryQuote',
        data: {
          quote_no
        }
      })
      res.then(res => {

        console.log(res)
        if (res.data.State.Code == 200) {
          // this.pages = res.data.page
          if (res.data.data.create_at) {
            this.getTable = [res.data.data]
            this.getTable.forEach(element => {
              let param = ''
              let nums = ''
              for (const key in element.goods) {
                if (element.goods.hasOwnProperty(key)) {
                  const ele = element.goods[key]
                  param += `${ele.request_id},`
                  nums += `${ele.num},`
                }
              }
              console.log(param)
              param = param.substr(0, param.length - 1)
              nums = nums.substr(0, nums.length - 1)

              this.$set(element, 'exportUrl', `https://www.fdimall.com/index/api/downloadPdf?user_id=${user_id}&invoice_type=${element.invoice_type}&quote_no=${element.quote_no}&goods_id=${param}&num=${nums} `)

              this.$set(element, 'previewUrl', `https://www.fdimall.com/index/api/previewPdf?user_id=${user_id}&invoice_type=${element.invoice_type}&quote_no=${element.quote_no}&goods_id=${param}&num=${nums} `)

              console.log(this.getTable)

              this.loading = false
            })

          } else {
            this.$notify.error({
              title: '错误',
              message: '请输入正确的报价单号...'
            })
          }

        }
      })
        .catch(err => {

        })

    },

    changesjump(ev, key) {
      this.index = key
      console.log(this.index)
    },

    // 导出报价单数据准备
    // async handleEdit(index) {
    //   console.log(index)
    //   let user_id = this.$store.state.UserInfor.user_id
    //   const list = this.getTable[index].goods
    //   console.log(list)
    //   let param = ''
    //   list.forEach(element => {
    //     param += `${element.id},`
    //   })
    //   param = param.substr(0, param.length - 1)
    //   this.url = `https://www.fdimall.com/index/api/downloadPdf?user_id=${user_id}&invoice_type=${this.sizeForm.InvoiceType}&goods_id=${param} `
    //   console.log(this.url)
    // },

    // 转订单
    async jumpOrder(index) {
      console.log(index)
      let CartArray = []
      this.getTable[index].goods.forEach(res => {
        console.log(res)
        let good = {}
        good.id = res.request_id
        good.pid = res.goods_id
        good.image = res.goods_logo
        good.name = res.goods_title
        good.price = res.selling_price
        good.num = res.num
        CartArray.push(good)
      })
      console.log(CartArray)

      this.$store.commit("shoppingCartDataDetails", CartArray) // 购物车下一步的存储   购物车数据
      this.$router.push('/ConfirmOrder')
    },

    // 查看报价单
    // watchQuotation(index, row) {
    //   // console.log(index, row)
    //   this.$router.push({
    //     name: "watchQuotation",
    //     params: {}
    //   })
    // }
  },
  mounted() {
    this.getQqotation()
  }
}
</script>
<style lang="scss" scoped>
.myQuotation {
  width: 970px;
  background: #fff;
  padding: 15px;
  box-sizing: border-box;
  .el-pagination {
    text-align: center;
    margin-top: 20px;
  }
  .title {
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid #f7f7f7;
    li {
      line-height: 56px;
      font-size: 16px;
      text-align: center;
      padding: 5px 10px;
      letter-spacing: 1.5px;
      margin: 0 15px;
      cursor: pointer;
      i {
        color: #ff9000;
      }
    }
    .active {
      color: #ff9000;
      line-height: 56px;
      font-weight: bold;
      border-bottom: #ff9000 solid 2px;
    }
  }
  .NumberOfBars {
    color: #ff9000;
    font-size: 12px;
    text-indent: 20px;
    line-height: 40px;
  }
}
</style>
